<template>
    <div>

      <el-row :gutter="10" style="margin-top: 20px">
        <el-col :span="5">
          <el-col :span="16">
            <el-select v-model="applyId" placeholder="请选择状态">
              <el-option
                  v-for="item in applyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="success" @click="paging(1)">查询</el-button>
          <el-button type="info" @click="clear">重置</el-button>
        </el-col>
      </el-row>
      <!--列表-->
      <el-table
        :data="page.list"
        style="width: 100%;margin-top: 20px;">
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="user.username"
          label="用户名称">
        </el-table-column>
        <el-table-column
            prop="tribe.name"
            label="部落名称">
        </el-table-column>
        <el-table-column
          prop="content"
          label="内容">
        </el-table-column>
        <el-table-column
            prop="state"
            label="状态"
        >
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.state==0">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.state==1">审核通过</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-link circle type="success" icon="el-icon-edit" @click="check(scope.row.id)">审核通过</el-link>
          </template>
        </el-table-column>



      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="page.pageNum"
        :page-sizes="[2, 3, 4, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>





    </div>
</template>

<script>
    export default {
        name: "TribeApply",
      data(){
        return{
          page:{},
          pageSize:5,
          applyId:'',
          applyList:[
            {
              id:0,
              name:'待审核'
            },{
              id:1,
              name:'已审核'
            }
          ],
        }
      },

      methods:{
        clear(){
          this.applyId=''

        },

        handleSizeChange(pageSize){
          this.pageSize=pageSize
          this.paging(1)
        },

        paging(curPage){
          this.$axios.get("/tribeMessage/list?curPage="+curPage+"&pageSize="+this.pageSize+ "&applyId="+this.applyId).then(resp=>{
            this.page=resp.data
            console.log("this.page",this.page)
          })
        },
        check(id){
          this.$axios.post('tribeMessage/check?id='+id).then(resp=>{
            if (resp.data.code==200){
              this.$message.success("审核通过")
            }else{
              this.$message.error("失败")
            }
          })
        }
      },
      created(){
          this.paging(1)
      }
    }
</script>

<style scoped>

</style>
